<template>
  <div class="login">
    <h1>用户登录</h1>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="form.userName"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="form.passWord"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div class="btn-submit">
        <van-button round block native-type="submit" type="primary"> 提交 </van-button>
      </div>
    </van-form>
  </div>

</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()

// 获取当前vue实例
const { proxy } = getCurrentInstance()

const form = reactive({
  userName: '',
  passWord: ''
})

const onSubmit = async() => {
  const { data } = await proxy.$api.login(form)
  if (data.code === 10000) {
    // 将token和用户信息放到缓存中
    localStorage.setItem('h5_token', data.data.token)
    localStorage.setItem('h5_userInfo', JSON.stringify(data.data.userInfo))
    router.push('/home')
  }
}
</script>

<style lang="less" scoped>
.login{
h1{
    text-align: center;
}
.btn-submit{
    margin: 16px;
    width: 80%;
}
}
</style>
